3 | The Tech Behind the Compressed.fm Site

Amy and James walk through the tech behind Compressed.fm and some of the unique challenges they faced when building the site.

SPONSORS

Pathwire / Mailgun / Mailjet

Pathwire is a powerful email API and intuitive email marketing solution that delivers over 250 billion emails a year for 400,000 companies around the world.

You can sign up now and try Mailgun or Mailjet for free today. Mailjet offers a trial that allows you to send 6,000 emails per month for free, forever. Mailgun offers a 3 month trial for 5,000 emails per month after which you only pay for what you send.

For more information, simply visit Pathwire.com

Vercel

Vercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.

For more information, visit Vercel.com

ZEAL is hiring!

Zeal is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.

Zeal believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, Coding Zeal looks for collaborative, object-oriented, and organized individuals to apply for open roles.

For more information visit their site.

Show Notes

0:00 Introduction
2:53 Powering the backend: Sanity.io
3:22 The difference between client-side and server-side rendering
5:50 Sanity's differentiator: Portable Text
8:35 Sponsor: Vercel
9:13 Finding a challenge in every project
11:14 Working with Framer Motion
13:26 Animating a hamburger menu with 2 CSS Properties
13:33 YouTube video explaining animating the hamburger animation
14:29 Josh Comeau
14:43 Authentication with Auth0
17:59 Experience with Next-Auth
18:54 Sponsor: Pathwire / Mailgun / Mailjet
20:00 Custom Audio Player
22:45 CSS Tricks article: Let’s Create a Custom Audio Player
24:31 Big Automation Kick
25:03 Sponsor: ZEAL
25:55 James's Discord: Learn Build Teach
26:06 Grab Bag Question #1: What's the best way to set up SEO metadata in Next.js?
26:40 React Helmet
27:02 Compressed.fm Source Code on GitHub
27:47 Grab Bag Question #2: Have you ever had an issue with Tailwind normalizing or overriding the text coming from Sanity?
29:05 SelfTeach.me Source Code on GitHub
29:36 Grab Bag Question #3: Where are you storing access tokens in Next.js apps?
31:00 James's Pick: [Webcam Swivel Arm ($20 on Amazon)](https://amzn.to/3tlY0EW
31:51 James's Plug: Learn Build Teach Discord Server
32:01 James's Plug: His YouTube Channel
32:17 Amy's Pick - Gravel Gravel Blanket
33:20 Big Blanket Co
34:00 Amy's Plug - SelfTeach.me on YouTube